<%--
  Created by IntelliJ IDEA.
  User: kangx
  Date: 2020/8/6
  Time: 16:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="${AppPath}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${AppPath}/css/font-awesome.min.css">
    <link rel="stylesheet" href="${AppPath}/css/main.css">
    <link rel="stylesheet" href="${AppPath}/css/doc.min.css">
    <link rel="stylesheet" href="${AppPath}/css/font.css">
    <link rel="stylesheet" href="${AppPath}/css/index.css">
    <script src="${AppPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${AppPath}/js/index.js"></script>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form role="form" class="form-inline"  id="empRoleForm" style="width:350px;margin:auto">
            <div class="form-group">
                <label for="noEmpRole" >未分配角色列表</label><br>
                <select class="form-control" name="roleId" id="noEmpRole" size="10" style="width:100px;overflow-y:auto;">

                </select>
            </div>
            <div class="form-group">
                <ul style="margin-left: 40px">
                    <button type="button" id="addBtn"><i class="layui-icon">&#xe602;</i></button>
<%--                    <li id="addBtn" class="btn btn-default glyphicon glyphicon-chevron-right" style="width: 30px;height: 40px"></li>--%>
                    <br>
                    <button type="button" style="margin-top:20px;" id="removeBtn"><i class="layui-icon">&#xe603;</i>   </button>
<%--                    <li id="removeBtn" class="btn btn-default glyphicon glyphicon-chevron-left" style="width: 30px;height: 40px;margin-top:20px;"></li>--%>
                </ul>
            </div>
            <div class="form-group" style="margin-left:40px;">
                <label for="isEmpRole">已分配角色列表</label><br>
                <select class="form-control" name="roleId" id="isEmpRole" multiple size="10" style="width:100px;overflow-y:auto;">

                </select>
            </div>
            <input type="hidden" name="empId" value="" id="empId">
        </form>
    </div>
</div>
<script src="${AppPath}/jquery/jquery-2.1.1.min.js"></script>
<script src="${AppPath}/bootstrap/js/bootstrap.min.js"></script>
<script src="${AppPath}/script/docs.min.js"></script>
<script src="${AppPath}/layer/layer.js"></script>
<script>
    function child(obj) {
        layui.$("#empId").val(obj)
        // 展示角色
        function showRole() {
            var str=$(":hidden[name=empId]").val();
            $.ajax({
                url:"${AppPath}/empRole/findEmpRole",
                data:{"empId":str},
                type:"post",
                success:function (resp) {
                    if(resp.error==null){
                        var noEmpRole=resp.noEmpRole;
                        var isEmpRole=resp.isEmpRole;
                        if (noEmpRole!=null){
                            var str1="";
                            $.each(noEmpRole,function (index,role) {
                                str1+='<option value="'+role.roleId+'">'+role.roleName+'</option>'
                            })
                            $("#noEmpRole").html(str1);
                        }
                        if (isEmpRole!=null){
                            var str2="";
                            $.each(isEmpRole,function (index,role) {
                                str2+='<option value="'+role.roleId.roleId+'">'+role.roleId.roleName+'</option>'
                            })
                            $("#isEmpRole").html(str2);
                        }
                    }else{
                        layer.msg("请稍后再试",{time:1000,icon:5,shift:6},function () {})
                    }

                }
            })
        }
        showRole();

        $("#addBtn").click(function () {
            $.ajax({
                url:"${AppPath}/empRole/add",
                type:"post",
                data:$("#empRoleForm").serialize(),
                success:function (resp) {
                    if (resp=='ok'){
                        showRole();
                    }else{
                        layer.msg("添加角色失败",{time:1000,icon:5,shift:6},function () {})
                    }
                }
            })
        });

        $("#removeBtn").click(function () {
            $.ajax({
                url:"${AppPath}/empRole/deleteByExample",
                type:"post",
                data:$("#empRoleForm").serialize(),
                traditron:true,
                success:function (resp) {
                    if (resp=='ok'){
                        showRole();
                    }else{
                        layer.msg("添加角色失败",{time:1000,icon:5,shift:6},function () {})
                    }
                }
            })
        });
    }
</script>

</body>

</html>